<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ATM-模拟</title>
    <script src="sdk/jquery-1.10.min.js"></script>
    <style>
        body, html {
            margin: 0;
            height: 100%;
        }

        label {
            font-size: 25px;
            font-weight: bold;
            color: white;
        }

        input {
            height: 28px;
            margin-bottom: 50px;
            outline-style: none;
            border: 1px solid #ccc;
            font-size: 20px;
            font-weight: bold;
        }

        .content {
            margin: 0 auto;
            width: max-content;
        }

        button {
            height: 85px;
            width: 200px;
            background-color: #d7d7d7;
            font-size: 20px;
            font-weight: bold;
            border: 0;
        }

        h1 {
            color: white;
        }
    </style>
</head>
<body>
<div style="margin: 0 auto;overflow: hidden;height: 15%;">
    <div style="float: left;margin: 10px;">
        <img src="img/信工logo.jfif" width="100px" alt="信工logo">
    </div>
    <div style="float: left;margin-left: 10px;">
        <span style="font-size: 50px;font-weight: bold;">中国儿童银行</span>
        <br>
        <span style="font-size: 35px;font-weight: bold;">China Child Bank</span>
    </div>
</div>

<div style="background-color: #330099;overflow: hidden;height: 85%;">
    <div style="float: left;width: 15%">
        <button id="last" onclick="lastPage()"
                style="position: absolute;top: 647px;border-bottom-right-radius: 10px;border-top-right-radius: 10px;box-shadow: 1px 1px 5px black;">
            上一条 <br> Last
        </button>
        <br>
        <button id="next" onclick="nextPage()"
                style="position: absolute;top: 847px;border-bottom-right-radius: 10px;border-top-right-radius: 10px;box-shadow: 1px 1px 5px black;">
            下一条 <br> Next
        </button>
    </div>
    <div style="width: 70%;margin: 200px auto;margin-bottom: 0;float: left;">
        <div class="content">
            <h1 id="logId"></h1>
            <h1 id="accountNo"></h1>
            <h1 id="toAccountId"></h1>
            <h1 id="amount"></h1>
            <h1 id="operateTime"></h1>
        </div>
    </div>
    <div style="float: right;width: 15%;">
        <button onclick="backToChoose()"
                style="margin-top: 720px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;box-shadow: -1px 1px 5px black;float: right">
            返回 <br> Back
        </button>
    </div>
</div>
<script>

    let url = location.search;
    let str = url.substr(1);
    let strs = str.split("&");
    let j = 0;
    let params = [];

    for (let i = 0; i < strs.length; i++) {
        params[j] = strs[i].split("=")
        j++;
    }
    $(function () {
        $.ajax(
            {
                url: "http://localhost:8888/atm/api/" + params[0][1] + "?token=" + localStorage.getItem("token"),
                type: "POST",
                datatype: "json", // 返回的数据格式
                success: function (res) {
                    if (res.code === 10001){
                        alert("登录异常，请重新登录")
                        window.location = "./login.html"
                        return;
                    }
                    if (res.code !== 200) {
                        alert("获取记录信息失败," + res.message)
                        return
                    }
                    let page = res.data.length - 1 - params[1][1]
                    console.log("查询的记录", res.data[page])
                    if (params[0][1] === "cashLog") {
                        $("#logId").text("取款流水号: " + res.data[page].cashId)
                        $("#accountNo").text("卡号：" + res.data[page].accountNo)
                        $("#amount").text("取款金额：" + res.data[page].cashAmount)
                        $("#operateTime").text("取款时间: " + res.data[page].cashOperateTime)
                    }
                    if (params[0][1] === "depositLog") {
                        $("#logId").text("存款流水号: " + res.data[page].depositId)
                        $("#accountNo").text("卡号：" + res.data[page].accountNo)
                        $("#amount").text("存款金额：" + res.data[page].depositAmount)
                        $("#operateTime").text("存款时间: " + res.data[page].depositOperateTime)
                    }
                    if (params[0][1] === "transferLog") {
                        $("#logId").text("转账流水号: " + res.data[page].transferId)
                        $("#accountNo").text("卡号：" + res.data[page].fromAccountId)
                        $("#toAccountId").text("目标卡号: " + res.data[page].toAccountId)
                        $("#amount").text("转账金额：" + res.data[page].transferAmount)
                        $("#operateTime").text("转账时间: " + res.data[page].transferOperateTime)
                    }
                    if (params[1][1] === "0") {
                        $("#last").remove()
                    }
                    if (page === 0){
                        $("#next").remove()
                    }
                },
                error: function () {
                    alert("服务器异常")
                }
            }
        )
    })

    function lastPage() {
        window.location = "./log.html?"+params[0][0]+"="+params[0][1]+"&"+params[1][0]+"="+(parseInt(params[1][1]) - 1)
    }

    function nextPage() {
        window.location = "./log.html?"+params[0][0]+"="+params[0][1]+"&"+params[1][0]+"="+(parseInt(params[1][1]) + 1)
    }

    function backToChoose() {
        window.location = "./chooseRecord.html"
    }
</script>
</body>
</html>